<:Title>
  Bindings

<:Body>
  <h1>Bindings</h1>

  <h2>Text</h2>
  <table class="table">
    <tr>
      <td>Page</td>
      <td><input type="text" id="pageName1" value="{{ page._name }}"></td>
      <td><input type="text" id="pageName2" value="{{ page._name }}"></td>
      <td id="pageName3">{{ page._name }}</td>
    </tr>
    <tr>
      <td>Params</td>
      <td><input type="text" id="paramsName1" value="{{ params._name }}"></td>
      <td><input type="text" id="paramsName2" value="{{ params._name }}"></td>
      <td id="paramsName3">{{ params._name }}</td>
    </tr>
    <tr>
      <td>Routes</td>
      <td><input type="text" id="routesName1" value="{{ params._route_test }}"></td>
      <td><input type="text" id="routesName2" value="{{ params._route_test }}"></td>
      <td id="routesName3">{{ params._route_test }}</td>
    </tr>
    <tr>
      <td>Local Store</td>
      <td><input type="text" id="localstoreName1" value="{{ local_store._name }}"></td>
      <td><input type="text" id="localstoreName2" value="{{ local_store._name }}"></td>
      <td id="localstoreName3">{{ local_store._name }}</td>
    </tr>
  </table>

  <h2>Checkbox</h2>

  <table class="table">
    <tr>
      <td>Page</td>
      <td><input type="checkbox" id="pageCheck1" checked="{{ page._check }}" /></td>
      <td><input type="checkbox" id="pageCheck2" checked="{{ page._check }}" /></td>
      <td id="pageCheck3">{{ page._check }}</td>
    </tr>
    <tr>
      <td>Params</td>
      <td><input type="checkbox" id="paramsCheck1" checked="{{ params._check }}" /></td>
      <td><input type="checkbox" id="paramsCheck2" checked="{{ params._check }}" /></td>
      <td id="paramsCheck3">{{ params._check }}</td>
    </tr>
  </table>

  <h2>Radio</h2>

  <table class="table">
    <tr>
      <td>Page</td>
      <td><input type="radio" id="pageRadio1" checked="{{ page._radio }}" value="one" /></td>
      <td><input type="radio" id="pageRadio2" checked="{{ page._radio }}" value="two" /></td>
      <td id="pageRadio3">{{ page._radio }}</td>
    </tr>
    <tr>
      <td></td>
      <td><input type="radio" checked="{{ page._radio }}" value="one" /></td>
      <td><input type="radio" checked="{{ page._radio }}" value="two" /></td>
      <td></td>
    </tr>
  </table>

  <h2>Select</h2>
  <table class="table">
    <tr>
      <td>Page</td>
      <td>
        <select id="pageSelect1" value="{{ page._select }}">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
        </select>
      </td>
      <td>
        <input type="text" id="pageSelect2" value="{{ page._select }}" />
      </td>
      <td id="pageSelect3">{{ page._select }}</td>
    </tr>
  </table>


  <h2>Textarea</h2>
  <table class="table">
    <tr>
      <td>Page</td>
      <td><textarea id="textareaName1">{{ page._textarea_name }}</textarea></td>
      <td><textarea id="textareaName2">{{ page._textarea_name }}</textarea></td>
      <td id="textareaName3">{{ page._textarea_name }}</td>
    </tr>
  </table>

  <h2>URL</h2>
  <table class="table">
    <tr>
      <td>Path</td>
      <td id="urlPath">{{ url.path }}</td>
    </tr>
    <tr>
      <td>Query</td>
      <td id="urlPath">{{ url.query }}</td>
      <td><input type="text" value="{{ url.query }}" /></td>
    </tr>
    <tr>
      <td>Fragment</td>
      <td id="urlPath">{{ url.fragment }}</td>
      <td><input type="text" value="{{ url.fragment }}" /></td>
    </tr>
  </table>

  <h2>If Bindings</h2>
  <p id='ifbinding'>
    {{ if page._show && true }}
    <span>If _show</span>
    {{ else }}
    <span>If false _show</span>
    {{ end }}
  </p>

  <h2>Unless Bindings</h2>
  <p id='unlessbinding'>
    {{ unless page._show && true }}
    <span>Unless _show</span>
    {{ else }}
    <span>Unless false _show</span>
    {{ end }}
  </p>

  <a id='showtrue' e-click='set_show(true)'>set _show true</a>
  <a id='showfalse' e-click='set_show(false)'>set _show false</a>

  <h2>Each Bindings</h2>
  <ul id='eachbinding'>
    {{ _items.each do |item| }}
    <li>{{ item }}</li>
    {{ end }}
  </ul>

  <a id='each-show-with-delay' e-click='show_with_delay'>Show with Delay</a>
  <a id='each-show-without-delay' e-click='show_without_delay'>Show without Delay</a>

  <h2>Content</h2>

  <p id="escapeContent">{{{this is {{escaped}}}}}</p>

  <h2>Event</h2>

  <input e-blur="blur" e-focus="focus" id="blurFocusField" />
  <div id="blurCount">{{ blur_count || 0 }}</div>
  <div id="focusCount">{{ focus_count || 0 }}</div>

  <h2>Raw</h2>

  <p>{{ raw 'some <br /> code' }}</p>
  <p>{{ raw Promise.new.resolve('some <br /> other code') }}</p>

  {{ # comment binding }}
